import { Card, Divider, Space, Typography } from 'antd'

import { useBoundStore } from '../../store'
import { getStaffTypeName } from '../../utils'
import styles from './styles.module.less'

export const RelevantPersonnel = () => {
  const detail = useBoundStore(state => state.detail)
  const staffInfoList = detail?.staffInfoList || []
  return (
    <Card>
      <div className={styles.item}>
        <div className={styles.item_header}>
          <Typography.Title level={5} className={styles.item_title}>
            {detail?.customer}
          </Typography.Title>
        </div>
        <Divider />
        <div className={styles.item_meta}>
          {staffInfoList.map((item, index) => (
            <div className={styles.item_meta_user} key={index}>
              <Space>
                <img className={styles.item_meta_user_phone} src={item.user?.phone} />
                <Space>
                  <Space.Compact direction="vertical">
                    <Typography.Text strong>{item.user?.name}</Typography.Text>
                    <Typography.Text className="small_print" strong>
                      {getStaffTypeName(item.staffType)}
                    </Typography.Text>
                  </Space.Compact>
                </Space>
              </Space>
            </div>
          ))}
        </div>
      </div>
    </Card>
  )
}
